<template>
  <div id="app">
    <router-view v-if="show"/>
  </div>
</template>

<script>
import { getInfoList, getNewInfo } from "./assets/api/api"
import config from "../public/config.json"
// import {maxData,minData,avgData} from "./assets/tool/common"
export default {
  name: 'App',
  data(){
        return {
          show:true,
          nameList:{
              '0D0D-E927-AD79-6A65': '极Ⅰ低端阀冷系统',
              '2627-EB48-7F10-BCCF': '极Ⅰ高端阀冷系统',
              'FFA4-EB6C-15A8-3C32': '极Ⅱ低端阀冷系统',
              '30E4-EDC0-F9C0-817D': '极Ⅱ高端阀冷系统'
          },
          newNameList:{
              '10M51111155825988': '极Ⅰ低端阀冷系统',
              '10M51111155825991': '极Ⅰ高端阀冷系统',
              '10M51111155825989': '极Ⅱ低端阀冷系统',
              '10M51111155825990': '极Ⅱ高端阀冷系统'
          },
            name:'极Ⅰ低端阀冷系统'
        }
    },

    watch:{
        name(val){
            if(val){
                this.show = false
                this.$nextTick(function () {
                    this.show = true;
                    this.getInfoLists()
                }) 
            }
        }
    },
  mounted(){
    let configname = window.localStorage.getItem('config')
    if(configname){
        this.name = JSON.parse(configname).systemName
    }
    setInterval(() => {
        
        configname = window.localStorage.getItem('config')
        if(configname){
            this.name = JSON.parse(configname).systemName
        }
    }, 2000)


    let newConfig = window.localStorage.getItem('config')
    if(!newConfig){
      window.localStorage.setItem('config',JSON.stringify(config))
    }

    const that = this

    this.getInfoLists()
    //加载页面时执行一次
    this.changeMargin();
    setInterval(() => {
      this.changeMargin();
    }, 1000)
    //监听浏览器宽度的改变
    let _self = this
    window.onresize = function(){
        _self.changeMargin();
    };
    window.addEventListener('message', function (e) {
      newConfig = window.localStorage.getItem('config')
      const Edata = JSON.parse(e.data)
      console.log('获取的assetID是：'+Edata.params.assetId !== JSON.parse(newConfig).assetId)
      if(Edata.params && Edata.params.assetId !== JSON.parse(newConfig).assetId){
        let assetId = '2627-EB48-7F10-BCCF'
        
        if(Edata.params.assetId === '10M51111155825988'){
          assetId = '0D0D-E927-AD79-6A65'
        }else if(Edata.params.assetId === '10M51111155825991'){
          assetId = '2627-EB48-7F10-BCCF'
        }else if(Edata.params.assetId === '10M51111155825989'){
          assetId = 'FFA4-EB6C-15A8-3C32'
        }else if(Edata.params.assetId === '10M51111155825990'){
          assetId = '30E4-EDC0-F9C0-817D'
        }

        config.assetId = Edata.params.assetId
        config.uuid = assetId
        config.systemName = that.nameList[assetId]

        console.log('存储的config是：'+config)


        window.localStorage.setItem('config',JSON.stringify(config))
        that.show = false
        that.$nextTick(function () {
            that.show = true;
            that.getInfoLists()
        }) 
      }
    },false)

  },
  computed:{
        config(){
            const config = window.localStorage.getItem('config')
            return config ? JSON.parse(config) : {}
        },
  },
  methods: {
    changeMargin(){
        var docWidth = document.body.clientWidth;
        if(docWidth <= 870){
            this.$store.commit('updataBodySize', true)
            document.getElementById('app').className = 'small';
        }else{
            this.$store.commit('updataBodySize', false)
            document.getElementById('app').className = 'big';
        }
    },
    // 获取设备列表
    getInfoLists(){
      getInfoList({token:this.config.token},(res) => {
        if(res.code === 200){
          this.$store.commit('updataInfoList',res.data.devices)
          this.getNewInfos()
        }
        
      })
    },
    // 获取设备实时信息
    getNewInfos(){
      const timer = setTimeout(() => {
          const list = this.$store.state.infoList.filter((item) => {
              console.log('-------------baseInfo', item.baseInfo.name, this.config.systemName,item.baseInfo.name === this.config.systemName)
              return item.baseInfo.name === this.config.systemName
          })[0]
          if(list && list.uuid){
              clearTimeout(timer)
              const params = {
                   uuid: list.uuid,
                  // uuid: 'C23A-2A8B-92C5-AAF3',
                  token:this.config.token
              }
              getNewInfo(params,(res) => {
                  this.$store.commit('updataRealTimeData',res)
              })
          }
      }, 1000)
    }
  }
}
</script>

<style>
body{ background: #0d1830; }
* { padding: 0; margin: 0; border: 0; 
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
    }
body, html { width: 100%; height: 100%;}
body { font-size: 12px; font-family: "微软雅黑"; }
ul, li { list-style: none; }
input, button, select { outline: none; }
input, button, select, a { cursor: pointer; }
a.ord{ text-decoration: none; }
#app{color: #5273E0;}
.small{
  width: 854px;
  height: 480px;
}
.big{
  width: 100%;
  height: 100%;
}
.el-icon-full-screen{
  color: #8DCFF8;
  font-size: 33px;
  cursor: pointer;
}
.el-button--primary{
  background: #1C2755 !important;
}
.el-input__inner,.el-button{
  background: #1C2755 !important;
  color: #ffffff !important;
}
.el-input__inner::placeholder{
  color: #eeeeee !important;
}
.el-table,
.el-table__expanded-cell,
.el-table th, .el-table tr,
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background: #072241 !important;
}
.el-icon-search,.el-table thead,.el-table__empty-text{
  color: #ffffff !important;
}
.el-table{
  color: #ffffff !important;
}
.el-table .cell{
  text-align: center;
}
.el-table--enable-row-hover .el-table__body tr:hover>td{
  background: #0d1830 !important;
}
/* .el-table .descending .sort-caret.descending,
.el-table .ascending .sort-caret.ascending{
  border-top-color: #1C2755 !important;
} */
.el-table td, .el-table th.is-leaf{
  border-bottom: 1px solid #6666 !important;
}
.el-table--border::after, .el-table--group::after, .el-table::before{
  background-color: #6666 !important;
}
.el-input__inner,.el-button{
  border: 1px solid #409EFF !important;
}
.el-input__inner{
  border-right: none !important;
}
.el-input-group__append, .el-input-group__prepend{
  border: none !important;
}
.failure .el-pagination{
  text-align:left !important;
}
.el-button--text{
  padding: 7px 15px !important;
}
.el-date-table td.disabled div{
  background: #1C2755 !important;
  color: #999999 !important;
}

</style>
